<template>
    <div class="w-header bf">
        <div class="fs14 h-search" v-if="!route.meta.title&&routeName">
            <div class="h-logo"></div>
            <div class="h-input-w" @click="$router.push({name:'goods-search'})">
                <input class="h-input" type="text" placeholder='请输入搜索商品' v-model="keywords">
                <span class="h-btn">搜索</span>
            </div>
        </div>
        <div class="search flex-row" v-if="!route.meta.title&&!routeName">
            <van-icon name="arrow-left" class="search-icon" @click="$router.go(-1)"/>
            <van-search class="flex-1 search-input" placeholder="请输入搜索关键词" readonly
                        @click="$router.replace({name:'goods-search'})"></van-search>
        </div>
        <van-nav-bar
            v-if="route.meta.title&&route.meta.rightText"
            class="h-nav-bar"
            :title=headTitle
            :right-text=route.meta.rightText
            left-arrow
            @click-left="$router.go(-1)"
            @click-right="onClickRight">
        </van-nav-bar>
        <van-nav-bar
            v-if="route.meta.title&&!route.meta.rightText"
            class="h-nav-bar"
            :title=headTitle
            left-arrow
            @click-left="$router.go(-1)">
        </van-nav-bar>
    </div>

</template>


<script>
    export default {
        name: "Header",
        data() {
            return {
                keywords: '',
                rightEdit: '编辑',
                headTitle: ''
            }
        },
        props: {
            route: {
                type: Object,
                default: {}
            },
        },
        computed: {
            routeName() {
                return (
                    this.$route.name == "home" ||
                    this.$route.name == '/' ||
                    this.$route.name == "category" ||
                    this.$route.name == "shopping" ||
                    this.$route.name == "mine"
                );
            }
        },
        watch: {
            route: function (route) {
                this.judegTitle()
            }
        },
        mounted() {
            this.judegTitle()
        },
        methods: {
            judegTitle() {
                this.headTitle = this.route.meta.title
                if (this.route.name == 'address-add' && this.route.query.addressId) this.headTitle = '编辑地址'
            },
            onSearch() {
                console.log(this.keywords)
                this.$emit('search', this.keywords)
            },
            onClickRight() {
                this.$store.commit(types.SET_RIGHT_STATUS, !this.$route.meta.rightStatus)
                this.$route.meta.rightStatus = !this.$route.meta.rightStatus
            }
        }
    }
</script>

<style scoped lang="scss">
    .h-logo {
        background-image: url("../../public/img/logo.png");
        background-repeat: no-repeat;
    }
</style>